<template>
  <!--
  appear : 初始化立即有效果
  -->
  <transition name="fade" appear>
    <div class="account">
      <AccountHeader @clickSwitch="clickSwitch"></AccountHeader>
      <AccountBottom :switchNun="switchNun"></AccountBottom>
    </div>
  </transition>
</template>

<script>
import AccountHeader from "../components/Account/AccountHeader"
import AccountBottom from "../components/Account/AccountBottom"
import MetaInfo from '../../vue.meta.info'

export default {
  name: "Account",
  metaInfo:MetaInfo.account,
  components: {
    AccountHeader,
    AccountBottom
  },
  data() {
    return {
      switchNun: 0
    }
  },
  methods: {
    clickSwitch(num) {
      this.switchNun = num;
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/variable";
@import "../assets/css/mixin";

.account {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  @include bg_sub_color();
}

.fade-enter {
  transform: translateX(100%);
}

.fade-enter-to {
  transform: translateX(0%);
}

.fade-enter-active {
  transition: transform 0.5s;
}

.fade-leave {
  transform: translateX(0%);
}

.fade-leave-to {
  transform: translateX(100%);
}

.fade-leave-active {
  transition: transform 0.5s;
}
</style>
